<!-- 证书学习组件 -->

<template>
	<view>
		<view class="top-title">
			<view style="display: flex;justify-content: space-between;align-items: center;box-sizing: border-box;padding: 0 30rpx;">
				<view style="width: 50%;">
					<u-tabs
						:list="tabList" 
						:scrollable="false"
						:activeStyle="{
							color: '#00ca9a'
						}"
						:inactiveStyle="{
							color: '#666666'
						}"
						:lineWidth="0"
						:current="current"
						@change="change"
					/>
				</view>
				
				<view class="icon" @click="jumpQAndA">
					<u-icon name="question-circle" size="18" color="#acacac" />
					<text style="margin-left: 10rpx;">常见问题</text>
				</view>
			</view>
			
		</view>
		
		<view class="item-box" v-if="list.length">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="item-top">
					<view class="item-top-left">
						<view class="item-top-left-buttom">
							<text style="'line-height': '40rpx'">{{item.porson_name}}</text>
							<text 
								:style="{
									'font-size': '20rpx',
									'border-radius': '3px',
									'box-sizing':'border-box',
									'padding': '2rpx 10rpx',
									color: item.status === '01' ? '#00c99a':item.status === '02'? '#ff4d4f' :'#fd8b35',
									background:item.status === '01' ? '#e8faf6':item.status === '02'? '#ffefef' :' #fef0e6',
									border:item.status === '01' ? '1rpx solid #00c99a':item.status === '02'? '1rpx solid #ff4d4f;' :'1rpx solid #fd8b35',
									'line-height': '40rpx',
									
								}"
							>{{item.status!='-1'?status[item.status]:'已过期'}}</text>
							
						</view>
					</view>
					<!-- <view class="item-top-right" style="text-align: center;">
						<view>总进度</view>
						<view style="color: #00c99a;">{{item.total_bai}}%</view>
					</view> -->
					<!-- <view class="item-top-right">
						<u-circle-progress 
							active-color="#00ca9a" 
							:percent="item.total_bai"
							:width='130'
							:border-width="15"	
						>
							<view class="u-progress-content">
								<text class='u-progress-info'>{{item.total_bai}}%</text>
							</view>
						</u-circle-progress>
					</view> -->
				</view>
				<view class="item-buttom">
					<view class="item-buttom-middle">证书编号：{{item.cert_number || "暂无"}}</view>
					<view class="item-buttom-middle">关联企业：{{item.e_name || "暂无"}}</view>
					<view class="item-buttom-middle">有效期截止日：{{item.cert_end_date}}</view>
					<view class="item-buttom-line"></view>
					<view class="item-buttom-button">
						<view 
							class="item-buttom-button-top"
							v-for="itm in item.cert_arr"
							:key="itm.cert_term_id"
						>
							<view>
								<view class="item-buttom-button-top-zhouqi">
									学习周期:{{itm.term_start_date}} - {{itm.term_end_date}}
								</view>
								<view class="item-buttom-button-top-jindu">
									<view class="jindutiao">
										<u-line-progress :show-percent='false' active-color="#00CA9A" :percent="itm.percentage" height='10' inactive-color='#D7D7D7'/>
									</view>
									<view class="jindutiaofenshu">
										{{itm.percentage}}%
									</view>
								</view>
							</view>
							<view class="item-buttom-button-right">
								<view class="">
									<u-button
										size="mini"
										text="进入"
										type="success" 
										shape='circle'
										:customStyle="customStyle" 
										@click="jump(1,item.cert_id,itm.cert_term_id)"
									></u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view
			style="text-align: center;color: #888;line-height: 80rpx;display: flex;flex-direction: column;align-items: center;margin: 150rpx 0;" 
			v-if="!list.length"
		>
			<image
				style="width: 210px;height: 130px;" 
				src="http://jjboss.oss-cn-hangzhou.aliyuncs.com/aqattach/20220819/7e54470305025e3bc8bcfa91bc3b451c.png" 
			/>
			<text style="margin-top: 17px;">暂无可学习证书</text>
		</view>
		
		<view class="history" v-if="history.length">
			<view class="history-title">历史证书</view>
			<view>
				<view class="history-item" v-for="(item,index) in history" :key="index">
					<view  class="history-item-title">
						{{item.porson_name}}
					</view>
					<view class="history-item-detail">证书编号：{{item.cert_number || "暂无"}}</view>
					<view class="history-item-detail">关联企业：{{item.e_name || "暂无"}}</view>
					<view class="history-item-detail">有效期截止日：{{item.cert_end_date}}</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import request from '@/common/js/request/userInfo.js';

	export default {
		name: 'certificaterPage',
		props:{
			bool: { type: Boolean, default: false },
			sentryPid: { type: [String,Number], default: 1 },
			
		},
		// 页面数据
		data() {
			return {
				customStyle: {
					width:"100%",
					background:"#00ca9a"
				},
				customStyleOne:{
					width:"100%",
					color:"#00ca9a",
					border:"1rpx solid #00ca9a"
				},
				tipsVisible:false,
				history:[],
				list:[],
				status:{
					'01':"有效",
					'02':"暂扣",
					'03':"撤销" ,
					'04':"注销", 
					"05":'吊销' ,
					'06':"失效",
					'07':"跨省调出",
					'08':"履职检查不合格",
					"10":"假章注销",
					"11":"社保证明造假",
					"12":"假身份证",
					"13":"假平安卡",
					"14":"特殊注销",
					'99':"其它"
				},
				tabList: [{name:'安管证书'},{name:'特种证书'}],
				current:0
			}
		},
		
		// 数据监听
		watch: { 
			bool:{
				handler(newV){
					this.tabSecond()
					this.getCertificateList()
				}
			}
		},
		created(){},
		beforeDestroy(){
			uni.$off('pullDownRefresh');
		},
		// 页面事件
		methods: {
			tabSecond(){
				// console.log(uni.getStorageSync('tabChild'),"----")
				// this.$nextTick(()=>{
					const tab = uni.getStorageSync('tabChild') + "";//这里传过来的tab可能是0  转为字符串
					if(tab){
						this.current = tab - 0;//转为Number
						uni.removeStorageSync('tabChild');
					}
				// })
				
			},
			//tabs改变
			change(e){ 
				uni.showLoading()
				this.current = e.index
				this.getCertificateList()
			},
			getCertificateList(){
				request.getCertificatePageList({
					data:{type:this.current + 1 },
					success:(res) => {
						uni.hideLoading()
						this.history = res.history
						this.list = res.list
					},
					fail:(err) => { 
						uni.hideLoading()
					}
				})
			},
			jumpQAndA(){
				uni.navigateTo({
					url:'/pagesB/pages/questionAndAnswer/index'
				})
			},
			jump(type,cert_id,cert_term_id){
				if(type===1){
					uni.navigateTo({
						url:`/pagesB/pages/certificateDetail/index?cert_id=${cert_id}&cert_term_id=${cert_term_id}&type=${this.current + 1}`
					})
				}
			}
		},
		
	}
</script>


<style lang="less" scoped>
	.top-title{
		background: #f7f7f7;
		font-size: 32rpx;
		text-align: center;
		font-family: PingFangSC, PingFangSC-Semibold;
		font-weight: 600;
		color: #262626;
		line-height: 88rpx;
		position: relative;
		.icon{
			display: flex;
			align-items: center;
			font-size: 26rpx;
			font-family: PingFangSC, PingFangSC-Regular;
			font-weight: 400;
			color: #7f7f7f;
			line-height: 36rpx;
		}
	}
		.item-box{
			box-sizing: border-box;
			padding:0 24rpx ;
			.item{
				padding-bottom:32rpx;
				border-radius: 18rpx;
				background-color: #fff;
				margin-bottom: 20rpx;
				.item-top{
					display: flex;
					box-sizing: border-box;
					padding: 10rpx 0 0 0;
					justify-content: space-evenly;
				}
				.item-top-left{
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;
				}
				
				.item-top-left-buttom{
					margin-top: 32rpx;
					margin-bottom: 32rpx;
					font-size: 30rpx;
					font-family: PingFangSC, PingFangSC-Medium;
					font-weight: 500;
					color: rgba(0,0,0,0.85);
					line-height: 42rpx;
					box-sizing: border-box;
					padding-left: 32rpx;
					text{
						margin-right: 16rpx;
					}
				}
				.item-top-right{
					// display: flex;
					padding: 40rpx;
					justify-content: center;
					align-items: center;
				}
			}
			
			.item-buttom{
				box-sizing: border-box;
				padding: 0 32rpx;
				.item-buttom-middle{
					font-size: 26rpx;
					font-family: PingFangSC, PingFangSC-Regular;
					font-weight: 400;
					color: #7f7f7f;
					margin-bottom: 20rpx;
					line-height: 36rpx;
				}
				.item-buttom-middle-tost{
					font-size: 24rpx;
					font-family: PingFangSC, PingFangSC-Regular;
					font-weight: 400;
					color: #ff4d4f;
					line-height: 32rpx;
				}
				.item-buttom-line{
					border-top: 1rpx dashed #d3d3d3;
					margin: 29rpx 0;
				}
				.item-buttom-day{
					display: flex;
					justify-content: space-between;
				}
				.item-buttom-day-item{
					flex: 1;
				}
				.item-buttom-day-num{
					font-size: 34rpx;
					font-family: DINPro, DINPro-Medium;
					font-weight: 500;
					color: #262626;
					line-height: 44rpx;
					text-align: center;
				}
				.item-buttom-day-cns{
					text-align: center;
					font-size: 22rpx;
					font-family: PingFangSC, PingFangSC-Regular;
					font-weight: 400;
					color: #7f7f7f;
					line-height: 30rpx;
					margin-top: 15rpx;
				}
				.item-buttom-button{
					margin-top: 32rpx;
					.item-buttom-button-right{
						width: 128rpx;
						height: 56rpx;
					}
					.item-buttom-button-top{
						margin-bottom: 16rpx;
						background: #f4f4f4;
						border-radius: 18rpx;
						box-sizing: border-box;
						padding: 20rpx 24rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.item-buttom-button-top-zhouqi{
							font-size: 22rpx;
							font-family: PingFangSC, PingFangSC-Regular;
							font-weight: 400;
							color: #7f7f7f;
							line-height: 30rpx;
						}
						.item-buttom-button-top-jindu{
							margin-top: 16rpx;
							display: flex;
							font-size: 20rpx;
							font-family: PingFangSC, PingFangSC-Regular;
							font-weight: 400;
							color: #7f7f7f;
							line-height: 28rpx;
							align-items: center;
						}
						.jindutiao{
							flex: 1;
						}
						.jindutiaofenshu{
							margin-left: 10rpx;
							width: 44rpx;
							height: 28rpx;
							font-size: 20rpx;
							font-family: PingFangSC, PingFangSC-Regular;
							font-weight: 400;
							color: #7f7f7f;
							line-height: 28rpx;
						}
					}
				}
				
			}
			
			
		}

	.history{
		box-sizing: border-box;
		padding: 0 24rpx;
		.history-title{
			font-size: 34rpx;
			font-family: PingFangSC, PingFangSC-Medium;
			font-weight: 500;
			color: #262626;
			line-height: 48rpx;
			margin: 26rpx 0 16rpx 0;
		}
		.history-item{
			box-sizing: border-box;
			padding: 20rpx 32rpx;
			background: #ffffff;
			border-radius: 18rpx;
			margin-bottom: 20rpx;
			.history-item-title{
				font-size: 30rpx;
				font-family: PingFangSC, PingFangSC-Medium;
				font-weight: 500;
				line-height: 42rpx;
				margin-bottom: 20rpx;
			}
			.history-item-detail{
				font-size: 26rpx;
				font-family: PingFangSC, PingFangSC-Regular;
				font-weight: 400;
				color: #7f7f7f;
				margin-bottom: 20rpx;
				line-height: 37rpx;
			}
			
		}
	}
</style>